<script setup>
import TopButtonCenter from "@/components/Pengyq/TopButtonCenter.vue";
import { ref, onMounted } from "vue";
import { ToastFun } from "@/hook/toast";
import {
  itemListAPI,
  getShopInfo,
  changeCommodityStatusAPI,
  changeCommodityUpAPI,
} from "@/server/api/cartView";

import { delCommodityAPI } from "@/server/api/ItemCommodity"


import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import { useUseStore } from "@/stores/user";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const shopInfo = ref({});
const baseURL = useUseStore().ing;
const itemIds = ref(0);
const commodityInfoList = ref([]);

const itemComDataReq = ref({
  shopId: null,
  page: 1,
  limit: 10,
  isDesc: false,
})
//  商品列表接口
const itemList = async () => {
  try {
    // 显示 loading 提示
    ToastFun("Loading", { duration: 0, msg: t("hotelPage.message"), position: "center" });
    itemComDataReq.value.shopId = route.query.itemId;
    const data = await getShopInfo(useUseStore().userId);
    // 获取店铺信息
    if (data.data.code === 200) {
      shopInfo.value = data.data.data[0];
      if (shopInfo.value.userImage) {
        shopInfo.value.userImage = shopInfo.value.userImage;
      }
    } else {
      ToastFun("fail", { msg: t("item.details.ShopInformation"), position: "bottom", duration: 2000 });
    }

    // 获取商品列表
    const res = await itemListAPI(itemComDataReq.value);
    if (res.data.code === 200) {
      commodityInfoList.value = res.data.data.data;
    } else {
      ToastFun("fail", { msg: ("item.details.productList"), position: "bottom", duration: 2000 });
    }
  } catch (error) {
    ToastFun("fail", { msg: ("item.details.LoadFail"), position: "bottom", duration: 2000 });
  } finally {
    ToastFun("close");
  }

};


//下架接口
const upToDown = async (commodityId, status) => {
  const res = await changeCommodityUpAPI(commodityId, status);
  // commodityInfoList.value[index].status = 1;
  itemList(itemIds.value);
};

//上架接
const downToUp = async (commodityId, status) => {
  const res = await changeCommodityStatusAPI(commodityId, status);
  itemList(itemIds.value);
};

// 跳转粉丝列表
const goItemFans = () => {
  router.push({
    path: "/ItemFans",
    query: {
      id: shopInfo.value.shopId,
    },
  });
};

// 跳转商品详情页面
const toComDetailFun = (id) => {
  router.push({
    path: "/details",
    query: {
      id,
    },
  });
};

// 跳转商店详情
const goPublisherFun = () => {
  let { itemName, score, userImage } = shopInfo.value;
  router.push({
    path: "/publisher",
    query: {
      itemId: shopInfo.value.shopId,
      publisherData: JSON.stringify({
        itemName,
        score,
        userImage,
      }),
    },
  });
};

//修改
const goToModifyProduct = (commodityId) => {
  router.push({
    path: "/addshop",
    query: {
      commodityId,
    },
  });
};

//删除
const del = async (commodityId) => {
  try {
    ToastFun("Loading", { duration: 0, msg: t("shopSeller.delete2"), position: "center" });
    const res = await delCommodityAPI(commodityId);
    if (res.data.code === 200) {
      itemList();
      ToastFun("success", { msg: t("shopSeller.delete3"), position: "bottom", duration: 2000 });
    } else {
      ToastFun("fail", { msg: t("shopSeller.delete4"), position: "bottom", duration: 2000 });
    }
  } catch (error) {
    ToastFun("fail", { msg: t("shopSeller.delete5"), position: "bottom", duration: 2000 });
  } finally {
    ToastFun("close");
  }
};

onMounted(() => {
  itemIds.value = route.query.itemId;
  itemList();
});
</script>
<template>
  <TopButtonCenter :title="$t('me.sellerCenter.manageGoods')" />
  <div class="ManageItemSubset">
    <header>
      <div class="login">
        <img :src="shopInfo.userImage" @click="goPublisherFun" alt />
      </div>

      <div class="right_tex">
        <h5>{{ shopInfo.shopName }}</h5>
        <div class="totol">
          <span @click="goItemFans()">
            {{ shopInfo.follows }} Fans &nbsp;
          </span>
          {{ shopInfo.score }}
          <van-rate v-model="shopInfo.score" :size="15" :count="5" color="#ffd21e" void-icon="star" void-color="#eee"
            readonly />
        </div>
      </div>
    </header>

    <ul class="list">
      <li class="box_show" v-for="(i, index) in commodityInfoList" :key="index">
        <!-- 图片部分 -->
        <div class="login">
          <img @click="toComDetailFun(i.commodityId)" v-lazy="i.avatarImg" alt />
        </div>

        <!-- 中间的商品信息和操作按钮 -->
        <div class="text_ad">
          <p class="commodity-name">{{ i.shopCommodityName }}</p>
          <div class="actions">
            <!-- 下架和上架按钮 -->
            <div class="button" v-if="i.status == 0" @click="upToDown(i.commodityId, 1)">
              {{ $t("me.manage.down") }}
            </div>
            <div class="button" v-else-if="i.status == 1" @click="upToDown(i.commodityId, 0)">
              {{ $t("me.manage.up") }}
            </div>
          </div>
        </div>

        <!-- 右侧的修改和删除按钮 -->
        <div class="right_actions">
          <img class="editImg" src="/images/edit.png" @click="goToModifyProduct(i.commodityId)">

          <img class="rubbishImg" src="/images/rubbish.png" @click="del(i.commodityId)">
          <!-- <van-icon name="records"   size="40" />
          <van-icon name="delete"  size="40" color="#ee0a24" /> -->
        </div>
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.ManageItemSubset {
  font-size: 14rem;
  padding: 60rem 10rem 0;

  header {
    display: flex;
    padding: 10rem 0;
    border-bottom: 1rem solid #d2d2d2;

    .right_tex {
      line-height: 30rem;
      margin: 0 10rem;

      >h5 {
        font-size: 16rem;
        font-weight: 500;
      }

      .totol {
        color: #d2d2d2;
      }
    }

    .login {
      width: 70rem;

      img {
        width: 68rem;
        height: 68rem;
        margin-right: 16rem;
        flex-shrink: 0;
      }
    }
  }

  .list {
    li {
      margin-bottom: 20rem;
      display: flex;

      align-items: flex-start;
      padding: 10rem 0;
      border-bottom: 1rem solid #f0f0f0;

      /* 图片部分 */
      .login {
        width: 80rem;
        flex-shrink: 0;

        img {
          width: 80rem;
          height: 80rem;
          object-fit: cover;
        }
      }

      /* 中间的商品信息和上下架按钮 */
      .text_ad {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20rem;
        flex-grow: 1;
        /* 使中间部分占据剩余空间 */
        text-align: center;
        /* 中间对齐 */

        .commodity-name {
          font-size: 16rem;
          font-weight: 500;
          margin-bottom: 10rem;

          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          word-wrap: break-word;
          overflow-wrap: break-word;
          white-space: normal;
        }

        .actions {
          display: flex;
          flex-direction: column;
          align-items: center;
          /* 上下排列按钮 */
          gap: 10rem;
        }

        .button {
          width: 100rem;
          height: 35rem;
          line-height: 35rem;
          text-align: center;
          color: #642e8e;
          border-radius: 20rem;
          border: 2rem solid;
          font-weight: 600;
          cursor: pointer;
        }
      }

      /* 右侧修改和删除按钮 */
      .right_actions {
        margin-left: 10rem;
        display: flex;
        flex-direction: column;
        gap: 10rem;
        align-items: flex-start;
        justify-content: flex-start;

        .editImg {
          width: 35px;
          height: 35px;
          margin-right: 23rem;
        }

        //垃圾桶图片
        .rubbishImg {
          width: 35px;
          height: 35px;
        }

        .button {
          width: 100rem;
          height: 35rem;
          line-height: 35rem;
          text-align: center;
          color: #642e8e;
          border-radius: 20rem;
          border: 2rem solid;
          font-weight: 600;
          cursor: pointer;
        }

        .delete {
          color: red;
          border-color: red;
        }
      }
    }
  }
}
</style>
